<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>CanvasLayer</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=mY5uHZeIjHh6RF4t8s1zbwYd901GUXHt"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> -->
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<style type="text/css">
body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0 ;font-family:"微软雅黑";}
</style>
</head>

<body>
    <div id="container"></div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("container",{
        enableBizAuthLogo:false
    });//创建Map实例
    map.centerAndZoom("郑州",5)  //地图初始化，地图中心点郑州
    window.setTimeout(function(){  
         map.panTo(new BMap.Point(115.67351592316193,34.40344062787401));   
        //    alert(1000)
        }, 2000);
    //测距离
    var myDis=new BMapLib.DistanceTool(map);
    map.addEventListener("load",function(){
        myDis.open();//开启鼠标测距
    })
    var point=new BMap.Point(113.63371563554479,34.74394839575077);//郑州坐标
    var point2=new BMap.Point(115.67351592316193,34.40344062787401);//商丘坐标
    var point3=new BMap.Point(126.06712626692925,42.952019732468756);
    // mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 10);//初始化地图，用城市名设置地图中心点
    map.enableScrollWheelZoom(true);//滚动加载
    //添加控件
    map.addControl(new BMap.NavigationControl());//显示街道，市区
    map.addControl(new BMap.ScaleControl());    //比例尺
    map.addControl(new BMap.OverviewMapControl());  //缩略地图,左下角
    map.addControl(new BMap.MapTypeControl());    //显示是卫星还是普通地图
    map.setCurrentCity("郑州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用 
	//单击获取点击的经纬度
	// map.addEventListener("click",function(e){
	// 	alert(e.point.lng + "," + e.point.lat);
	// });

    // 郑州市创建标注
    var marker = new BMap.Marker(point);  // 创建标注郑州
    var marker2=new BMap.Marker(point2);  //创建标注商丘
    var marker3=new BMap.Marker(point3)
    marker.addEventListener("click",function(e){
        searchInfoWindow.open(marker);
    })//注册点击事件
    map.addOverlay(marker);               // 郑州增加点
    map.addOverlay(marker2); 
    map.addOverlay(marker3)               //商丘增加点
	// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    //添加文字标注
	var label = new BMap.Label("郑州市",{offset:new BMap.Size(20,-10)});
    var label2 =new BMap.Label("商丘市",{offset:new BMap.Size(20,-10)})
    var label3=new BMap.Label("磐石市",{offset:new BMap.Size(20,-10)})
    marker.setLabel(label);
    marker2.setLabel(label2);
    marker3.setLabel(label3)
    //添加简介
    var content='<div style="margin:0 quto;line-height:20px; padding:2px;">' +
        // '<img src="/img/timg.jpg" alt="图片" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>'+
        '郑州是河南省省会，中国重要的内陆开放城市和历史文化名城，也是中国中部地区正在崛起的现代化商贸城市。'
        '</div>'
    // //点击事件
    // function attribute(){
    //     alert(1)
    // }
   //创建检索信息窗口对象
    var searchInfoWindow = null;
    searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
			title  : "河南郑州",      //标题
			width  : 290,             //宽度
			height : 105,              //高度
			panel  : "panel",         //检索结果面板
			enableAutoPan : true,     //自动平移
			searchTypes   :[
				BMAPLIB_TAB_SEARCH,   //周边检索
				BMAPLIB_TAB_TO_HERE,  //到这里去
				BMAPLIB_TAB_FROM_HERE //从这里出发
			]
		});
//原型区域内进行检索
var circle =new BMap.Circle(point2,2000,{
        fillColor:'pink',strokeWeight:1,fillOpacity:0.3,srokeOpacity:0.3
    });
    map.addOverlay(circle);
    var local =new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});
    local.searchNearby('体育馆',point2,1000)
</script>
